import React, {Component} from 'react';
import SimpleSelect from "./simpleSelect";
import Start from "./help/Start";
import Stop from "./help/stop";
import DiscreteSlider from "./help/DiscreteSlider";
import SimpleSelectForAlgorithm from "./SimpleSelectForAlgorithm";


class Menu extends Component {
    generateN = (n) => {
        let a = []
        for (let i = 0; i < n; i++) {
            a.push(i);
        }
        return a;
    }
    render = () => {
        let algo = this.props.algo;
        let input;
        const onChange = () => {
          let inputElement = document.getElementById("input");
          let string = inputElement.value;
          string = string.replaceAll(/\s/g, "");
          string = string.replaceAll(/\d{4}/g, "");
          string = string.replaceAll(/\s\s/g, " ");
          string = string.replaceAll(/\s,/g, ",");
          string = string.replaceAll(/,,/g, ",");
          string = string.replaceAll(/[^0-9,\s]/g, "");
          inputElement.value = string;
          this.props.handleInput();
        }
        const onChange2 = () => {
          let inputElement = document.getElementById("input-key");
          let string = inputElement.value;
          string = string.replaceAll(/\s/g, "");
          string = string.replaceAll(/\d{4}/g, "");
          string = string.replaceAll(/\s\s/g, " ");
          string = string.replaceAll(/[^0-9\s]/g, "");
          inputElement.value = string;
          this.props.handleInput();
        }
        if (algo === 0) {
            input = (
                 <div className="me-2 d-flex align-items-center justify-content-center rounded ps-3 pe-3 bg-light">
                    <SimpleSelect
                        selectNum = {this.props.selectNum}
                        pos={0}
                        label={'N'}
                        items={this.generateN(this.props.MaxN)}
                        onValueChanged={this.props.setN}
                    />
                </div>
            )
        } else {
            input = (
                <div className="me-2 d-flex align-items-center justify-content-center rounded ps-3 pe-3 bg-light">
                    <div className="input-group input-group-sm ml-2 mr-2"
                         style={{position: "relative", width: "15vw", height: "64px", lineHeight: "64px"}}>
                    <input id= "input" type="text" className="form-control" aria-label="Sizing example input"
                               aria-describedby="inputGroup-sizing-default" placeholder="1,2,3,4...(以英文逗号分隔)"
                           style={{height: "70%", fontSize: "1.2em" ,position:"relative", top: "50%", transform: "translate(0px, -50%)"}}
                        onChange={onChange}/>
                    </div>
                </div>
            )
            if (algo === 1) {
                input = (
                    <React.Fragment>
                        {input}
                        <div className="me-2 d-flex align-items-center justify-content-center rounded ps-3 pe-3 bg-light">
                            <div className="input-group input-group-sm ml-2 mr-2"
                                 style={{position: "relative", width: "4vw", height: "64px", lineHeight: "64px"}}>
                                <input id= "input-key" type="text" className="form-control" aria-label="Sizing example input"
                                       aria-describedby="inputGroup-sizing-default" placeholder="key"
                                   style={{height: "70%", fontSize: "1.2em" ,position:"relative", top: "50%", transform: "translate(0px, -50%)"}}
                                    onChange={onChange2}
                                />
                            </div>
                        </div>
                    </React.Fragment>
                )
            }
        }

        return (
            <div className="container-fluid">
<div className="row">
            <div className="w-100 d-flex">
                <div className="me-2 align-self-center">
                  <button type="button" className="btn btn-success" style={{whiteSpace: "nowrap"}}
                          id="newRandomGraphButton" onClick={this.props.onGenerate}>Generate
                  </button>
                </div>


                 <div className="me-2 align-self-center">
                  <button type="button" className="btn btn-primary" style={{whiteSpace: "nowrap"}} data-bs-toggle="modal"
                          data-bs-target="#staticBackdrop">Input
                  </button>
                </div>

                {input}

                <div className="me-2 d-flex align-items-center justify-content-center rounded ps-3 pe-3 bg-light">
                    <SimpleSelectForAlgorithm

                        pos={0}
                        label={'Algorithm'}
                        items={['Fibonacci','IF ELSE']}
                        onValueChanged={this.props.setAlgo}
                    />
                </div>

                {/*<SimpleSelect*/}
                {/*    pos={0}*/}
                {/*    label={'R'}*/}
                {/*    items={this.generateN(6)}*/}
                {/*    onValueChanged={this.props.setR}*/}
                {/*/>*/}

                <div className="me-2 d-flex align-items-center justify-content-center rounded ps-3 pe-3 bg-light">
                    <DiscreteSlider
                        handleSpeed={this.props.handleSpeed}
                    />
                </div>

                <div className="me-2 d-flex align-items-center justify-content-center rounded ps-3 pe-3 bg-light">
                    <Start
                        handlePaused = {this.props.handlePaused}
                        select = {this.props.select}
                    onStart={this.props.onStart}
                    />
                </div>

                <div className="me-2 d-flex align-items-center justify-content-center rounded ps-3 pe-3 bg-light">
                    <Stop
                    onReset={this.props.onReset}
                    />
                </div>




                {/*<button*/}
                {/*    className='btn btn-warning btn-lg m-2'*/}
                {/*    onClick={this.props.onReset}*/}
                {/*    // disabled={this.props.disable}*/}
                {/*>Reset</button>*/}

                {/*<button*/}
                {/*    className='btn btn-warning btn-lg '*/}
                {/*    onClick={this.props.onStart}*/}
                {/*    // disabled={this.props.disable}*/}
                {/*>Visualize</button>*/}

            </div>
</div>
                </div>
        );
    }
    isClickable = () =>
        {
            if (this.props.disable) {
                return {cursor: "not-allowed"};
            } else {
                return {};
            }
        }
    }


    export default Menu;